<template>
	<view>
		<view class="titleBox">
			<view class="titleLeft">
				<uni-icons color="#D2D2D2" type="back"  @click="goBack" size="30"></uni-icons>
			</view>
			<view class="titleText">
				<text>租铺订单</text>
			</view>
			<view class="titleRight"></view>
		</view>
		<view class="content">
			<view class="title">(有仆) 新店管家小程序</view>
			<view class="paycont">
				￥<text class="paynum">{{vipPrice}}.00</text>
			</view>
		</view>
		<view class="meth">
			<text>支付方式</text>
			<view class="meth-right">
				<text>{{choiceContent}}</text>
				<uni-icons color="#D2D2D2" type="right" size="30"  @click="btnShowHideClick"></uni-icons>
			</view>
		</view>
		<view class="select" v-if="isShow">
			<text @click="btnChoiceClick(index,item.cont)" v-for="(item,index) in seleces" :key="index">{{ item.cont }}</text>
		</view>
		<view class="button">
			<view class="button-cont">
				<text>支付安全有中国人民财产保险股份有限公司承包</text>
				<button @click="payfor">立即支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				vipPrice:'',
				openid:'',
				leaselise:[],
				lease:[],
				isShow: false,
				choiceContent: '请选择支付方式',
				choiceIndex: '',
				Paymethod: '',
				seleces: [{
					ids: 0,
					cont: '零钱',
					num: 2
				},
				{
					ids: 1,
					cont: '微信支付',
					num: 1
				}
				],
			}
		},
		onLoad(option) {
			this.id = option.id
			console.log(this.id)
			this.getVipPrice()
		},
		methods: {
			goBack() {
				uni.navigateBack(1)
			},
			btnChoiceClick: function(position) {
				this.choiceIndex = position
				this.isShow = false
				this.choiceContent = this.seleces[position].cont
				this.Paymethod = this.seleces[position].num
				console.log(this.Paymethod)
			},
			btnShowHideClick: function() {
				var _this = this
				_this.choiceContent = "";
				if (_this.isShow) {
				_this.isShow = false
				} else {
				_this.isShow = true
				}
			},
			//获取会员费价格
			getVipPrice() {
				this.openid = uni.getStorageSync('OpenID');
				this.$myRequest({
					url: 'getPayable',
					data: {
						OpenID: this.openid,
						Type: 2,
						ID: this.id
					},
					dataType: 'json',
				}).then(res => {
					this.lease = res.data;
					this.vipPrice = this.lease.Payable
				})
			},
			payfor() {
				this.openid = uni.getStorageSync('OpenID');
				this.$myRequest({
					url: 'payOrder',
					data: {
						OpenID: this.openid,
						Type: 2,
						Amount: this.lease.Payable,
						PayMethod: this.Paymethod,
						ID: this.id
					},
					dataType: 'json',
				}).then(res => {
					this.leaselise = res.data;
					console.log(this.leaselise)
				})
			}
		}
	}
</script>

<style scoped>
	.content{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 72rpx;
		color: #1B1C1E;
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
	}
	.paycont{
		margin-top: 40rpx;
	}
	.paynum{
		font-size: 60rpx;
	}
	.meth{
		margin-top: 60rpx;
		border: 1rpx solid #707070;
		padding: 0 32rpx;
		font-size: 32rpx;
		width: 750rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.meth-right{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 40rpx;
	}
	.button{
		position: absolute;
		bottom: 40rpx;
	}
	.button-cont{
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.button-cont text{
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #747475;
		line-height: 34rpx;
	}
	.button-cont button{
		width: 720rpx;
		height: 96rpx;
		background: #FF5F17;
		color: #fff;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
	}
	.select{
		position: absolute;
		left: 157rpx;
		margin-top: 5rpx;
		width: 400rpx;
		height: 200rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		display: flex;
		flex-direction: column;
		background-color: #CCCCCC;
	}
</style>
